<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<title>图文素材管理</title>
<link href="${ctx}/jeasyui-extensions/plugins/uploadify/uploadify.css" rel="stylesheet">
<script type="text/javascript" src="${ctx}/jeasyui-extensions/jeasyui-extensions/jquery-easyui-euploadify/jquery.euploadify.js"></script>
<link href="${ctx}/jeasyui-extensions/plugins/ueditor/ue1_4_3-utf8-net/themes/default/css/ueditor.css" rel="stylesheet">
<script type="text/javascript" src="${ctx}/jeasyui-extensions/plugins/ueditor/ue1_4_3-utf8-net/ueditor.config.js"></script>
<script type="text/javascript" src="${ctx}/jeasyui-extensions/plugins/ueditor/ue1_4_3-utf8-net/ueditor.all.js"></script>
<script type="text/javascript" src="${ctx}/jeasyui-extensions/plugins/ueditor/ue1_4_3-utf8-net/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="${ctx}/jeasyui-extensions/jeasyui-extensions/jquery-easyui-ueditor/jquery.ueditor.js"></script>
<script src="${ctx}/static/selectWin/appSelector.js?version=${applicationScope.jsVersion }" type="text/javascript"></script>
<script type="text/javascript">
	var $grid;
	var $detailGrid;
	var selectTableRow;
	var $appSelector;
	var state = "";
	$(function() {
		$grid = $("#grid").datagrid($.extend(datagridOption, {
			url : "${ctx}/wx/material/dataGrid",
			toolbar : "#tt",
			columns : [ [ {
				field : 'ck',
				checkbox : true
			}, {
				field : 'app.appName',
				title : '微信公众账号',
				width : 95,
				sortable : true
			}, {
				field : 'materialDesc',
				title : '图文素材描述',
				sortable : true
			} ] ],
			onClickRow : function(rowIndex, rowData) {
				selectTableRow = rowData;
				$("#cc").layout("panel", "east").panel({
					title : "图文素材【" + rowData.materialDesc + "】明细显示"
				});
				$("#cc").layout("expand", "east");
				$detailGrid.datagrid("removeFilterRule");
				refreshDetail();
			},
		}));

		$detailGrid = $("#detailGrid").datagrid($.extend(datagridOption, {
			url : '',
			toolbar : "#detailtt",
			fitcolumn : true,
			columns : [ [ {
				field : 'ck',
				checkbox : true
			}, {
				field : 'title',
				title : '标题',
				sortable : true
			}, {
				field : 'thumbMediaId',
				title : '缩略图ID',
				sortable : true
			}, {
				field : 'author',
				title : '作者',
				sortable : true
			}, {
				field : 'digest',
				title : '摘要',
				sortable : true
			}, {
				field : 'showCoverPic',
				title : '封面是否显示于正文',
				sortable : true,
				formatter : function(value, row, index) {
					return value == 1 ? "是" : "否";
				}
			}, {
				field : 'content',
				title : '正文',
				sortable : true,
				formatter : function(value, row, index) {
					return "点击显示正文";
				}
			}, {
				field : 'contentSourceUrl',
				title : '原文URL',
				sortable : true
			}, {
				field : 'pageNumber',
				title : '顺序',
				sortable : true
			} ] ],
			onClickRow : function(rowIndex, rowData) {
			}
		}));

		$grid.datagrid('enableFilter');

		$detailGrid.datagrid('enableFilter', [ buildDGFilterYesOrNoFieldOptions($grid, 'ShowCoverPic') ]);

		$appSelector = $("#app").comboselector(appSelectOpts);
		$("#thumbMedia").euploadify({
			multiTemplate : 'simple',
			multi : true,
			auto : false,
			showStop : true,
			showCancel : true,
			width : 802,
			'fileTypeExts' : '*.jpg',
			'queueSizeLimit' : 1,// 上传队列中所允许的文件数量
			'simUploadLimit' : 1,// 允许同时上传的文件数量
			swf : '${ctx }/static/uploadify/uploadify.swf?var=' + (new Date()).getTime(),
			uploader : '${ctx }/basic/basicFile/upload',
			onUploadSuccess : function(file, data, response) {
				var obj = eval('(' + data + ')');
				$("#thumbMediaId").val(obj.obj.id);
			}
		});
		$("#add").click(function() {
			$("#fm").form("clear");
			$("#dlg").dialog("open").dialog("setTitle", "新增图文素材描述");
		});
		$("#add_Detail").click(function() {
			if (!selectTableRow) {
				showWarnInfo("未选中图文素材描述");
				return false;
			}
			state = "";
			$("#detailfm").form("clear");
			$("#materialId").val(selectTableRow.id);
			$("#detaildlg").dialog("open").dialog("setTitle", "新增图文素材");
		});
		$("#edit").click(function() {
			var rowData = $grid.datagrid("getSelected");
			if (!rowData) {
				showInfo("您未选中行，无法编辑");
				return false;
			}
			$("#dlg").dialog("open").dialog("setTitle", "编辑图文素材描述");
			$("#fm").form("clear");
			$("#fm").form("load", rowData);
			if (rowData.app) {
				$appSelector.combo("setText", rowData.app.appName).combo("setValue", rowData.app.id);
			}
		});
		$("#edit_Detail").click(function() {
			if (!selectTableRow) {
				showWarnInfo("未选中图文素材描述");
				return false;
			}
			var rowData = $detailGrid.datagrid("getSelected");
			state = "";
			$("#detaildlg").dialog("open").dialog("setTitle", "编辑图文素材");
			$("#detailfm").form("clear").form("load", $.extend(rowData, {
				showCoverPicButton : (rowData.showCoverPic == 1 ? "on" : "")
			}));
			$("#materialId").val(rowData.material.id);
			$("#lastthumbMediaId").val(rowData.thumbMediaId);
			$.post("${ctx}/wx/materialActicle/getThumbMedia", {
				id : rowData.thumbMediaId
			}, function(data) {
				if (data.success) {
					$("#thumbMedia").euploadify("setQueueData", data.obj);
				}
			}, "json");
		});

		$("#delete").click(function() {
			multiDeleteDataGrid($grid, "${ctx}/wx/material/multiDelete");
		});
		$("#delete_Detail").click(function() {
			var row = $grid.datagrid("getSelected");
			if (!row) {
				showAlert("您未选择任何记录!");
				return false;
			}
			multiDeleteDataGrid($detailGrid, "${ctx}/wx/materialActicle/multiDelete", $grid);
		});
		$("#search").click(function() {
			$grid.datagrid('load', $("#tt").form("getData"));
		});
		$("#excelExport").click(function() {
			var url = "${ctx}/wx/material/excelExport?" + $.param($grid.datagrid('options').queryParams);
			if ($grid.datagrid("options").filterRules) {
				url += "&filterRules=" + JSON.stringify($grid.datagrid("options").filterRules);
			}
			window.parent.location.href = url;
		});

		$("#detail_excelExport").click(function() {
			var url = "${ctx}/wx/materialActicle/excelExport?" + $.param($detailGrid.datagrid('options').queryParams);
			if ($detailGrid.datagrid("options").filterRules) {
				url += "&filterRules=" + JSON.stringify($detailGrid.datagrid("options").filterRules);
			}
			window.parent.location.href = url;
		});
	});
	//刷新明细
	function refreshDetail() {
		if (!selectTableRow) {
			showAlert("请先选择单头信息");
			return false;
		} else {
			$("#detailGrid").datagrid({
				url : "${ctx}/wx/materialActicle/dataGrid?search_EQ_material.id=" + selectTableRow.id
			});
			$detailGrid.datagrid('enableFilter', [ buildDGFilterYesOrNoFieldOptions($grid, 'showCoverPic') ]);
		}
	}
	function fn_detailsave() {
		state = "submit";
		$("#detailfm").form("submit", {
			url : "${ctx}/wx/materialActicle/update",
			success : function(data) {
				if (data.success) {
					$("#thumbMedia").euploadify("cancel", "*");
					$("#detaildlg").dialog('close');
					$("#detailGrid").datagrid("load").datagrid("clearSelections").datagrid("clearChecked");
				}
				showInfo(data.msg);
			}
		});
	}
	function fn_detailcancel() {
		state = "cancel";
		$("#thumbMedia").euploadify("cancel", "*");
		$('#detaildlg').dialog('close');
	}
	function dorpFileForServer() {
		var id = $("input[title='uploadify']").attr("id");
		var deleteId = id + "Id";
		if (state == "") {
			if ($("#last" + deleteId).val() != $("#" + deleteId).val()) {
				$.post("${ctx}/basic/basicFile/multiDelete", {
					ids : $("#" + deleteId).val()
				}, function(data) {
					$("#" + deleteId).val("");
				}, "json");
			}
		} else if (state == "cancel") {
			if ($("#" + deleteId).val() != "" && $("#" + deleteId).val() != $("#last" + deleteId).val()) {
				$.post("${ctx}/basic/basicFile/multiDelete", {
					ids : $("#" + deleteId).val()
				}, function(data) {
					$("#" + deleteId).val("");
				}, "json");
			}
		} else if (state == "submit") {
			if ($("#last" + deleteId).val() != "" && $("#last" + deleteId).val() != $("#" + deleteId).val()) {
				$.post("${ctx}/basic/basicFile/multiDelete", {
					ids : $("#last" + deleteId).val()
				}, function(data) {
					$("#last" + deleteId).val("");
				}, "json");
			}
		}
		state = "";
	}
</script>
</head>

<body>
	<div data-options="region:'center'" data-options="fit:true" style="padding: 1px;">
		<div id="cc" class="easyui-layout" data-options="fit:true" style="width: 480px; height: 440px;">
			<div data-options="region:'center'" style="padding: 1px; witdh: 500px">
				<table id="grid">
				</table>
			</div>
			<div id="tt" class="easyui-toolbar">
				<shiro:hasPermission name="material:update">
					<a id="add" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-standard-add'">新增</a>
					<a id="edit" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-hamburg-pencil'">编辑</a>
				</shiro:hasPermission>
				<shiro:hasPermission name="material:delete">
					<a id="delete" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-hamburg-busy'">删除</a>
					<div class="dialog-tool-separator"></div>
				</shiro:hasPermission>
				<shiro:hasPermission name="material:export">
					<a id="excelExport" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-standard-page-excel'">Excel导出</a>
				</shiro:hasPermission>
			</div>
			<shiro:hasPermission name="essOuterSale:update">
				<div id="dlg" class="easyui-dialog" style="width: 350px; height: 180px; padding: 10px 20px"
					data-options="iconCls:'icon-save',resizable:true,modal:true, buttons:[
                    { text: '保存', iconCls: 'icon-ok', handler: function () { formSave('#fm', '#grid', '#dlg', '${ctx}/wx/material/update'); } },
                    { text: '取消', iconCls:'icon-cancel', handler: function () { $('#dlg').dialog('close'); } }
                ],closed:true">
					<form id="fm" method="post">
						<input type="hidden" name="id" />
						<table id="tbl">
							<tr>
								<td><label>所属公共账号:</label></td>
								<td><input id="app" name="app" data-options="required: true"></td>
							</tr>
							<tr>
								<td><label>素材描述:</label></td>
								<td><textarea name="MaterialDesc" rows="3" cols=""></textarea></td>
							</tr>
						</table>
					</form>
				</div>
			</shiro:hasPermission>
			<div data-options="region:'east', title:'图文素材', split: true, collapsible:true, collapsed:true" style="padding: 1px; witdh: 800px">
				<table id="detailGrid">
				</table>
			</div>
			<div id="detailtt" class="easyui-toolbar">
				<shiro:hasPermission name="material:update">
					<a id="add_Detail" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-standard-add'">新增</a>
					<a id="edit_Detail" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-hamburg-pencil'">编辑</a>
				</shiro:hasPermission>
				<shiro:hasPermission name="material:delete">
					<a id="delete_Detail" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-hamburg-busy'">删除</a>
					<div class="dialog-tool-separator"></div>
				</shiro:hasPermission>
				<shiro:hasPermission name="material:export">
					<a id="excelExport_Detail" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-standard-page-excel'">Excel导出</a>
				</shiro:hasPermission>
			</div>
			<div id="detaildlg" class="easyui-dialog" style="width: 950px; height: 500px; padding: 10px 20px"
				data-options="iconCls:'icon-save',resizable:true,modal:false,maximizable:true,collapsible:true, 
			buttons:[{ text: '保存', iconCls: 'icon-ok', handler: function () { fn_detailsave(); } },
                    { text: '取消', iconCls:'icon-cancel', handler: function () { fn_detailcancel(); } }
                ],closed:true,closable:false">
				<form id="detailfm" method="post">
					<!-- formSave('#detailfm', '#detailGrid', '#detaildlg', '${ctx}/wx/materialActicle/update'); -->
					<input type="hidden" name="id" /><input id="materialId" type="hidden" name="material" /><input id="lastthumbMediaId" type="hidden"
						name="lastthumbMediaId" />
					<table>
						<tr>
							<td>封面标题：</td>
							<td><input id="title" name="title" class="easyui-validatebox" data-options="required: true" style="width: 800px"></td>
						</tr>
						<tr>
							<td>消息作者：</td>
							<td><input id="author" name="author" class="easyui-validatebox" data-options="required: true" style="width: 800px"></td>
						</tr>
						<tr>
							<td>封面图片：</td>
							<td height="50px"><input id="thumbMedia" name="thumbMedia" type="text" title="uploadify" /><input id="thumbMediaId"
								name="thumbMediaId" type="hidden" onchange="tupianisChange()" /></td>
						</tr>
						<tr>
							<td>摘要：</td>
							<td><input name="digest" class="easyui-validatebox" style="width: 800px"></td>
						</tr>
						<tr>
							<td></td>
							<td height="50px"><input id="showCoverPic" name="showCoverPicButton" type="checkbox" /><label for="showCoverPic">是否将封面显示与正文顶部</label></td>
						</tr>
						<tr>
							<td>消息内容：</td>
							<td><textarea id="newsContent0" name="content" class="easyui-ueditor"
									data-options="height: 300,width:800, value: '',template: 'full',codeMirrorJsUrl: false, codeMirrorCssUrl: false,required: true">
                              </textarea></td>
						</tr>
						<tr>
							<td>消息URL：</td>
							<td><input name="contentSourceUrl" class="easyui-validatebox" style="width: 800px"></td>
						</tr>
						<tr>
							<td>排序：</td>
							<td><input name="pageNumber" class="easyui-validatebox" style="width: 800px"></td>
						</tr>
					</table>
				</form>
			</div>
		</div>
	</div>
</body>
</html>
